<template>
  <div class="airdrop hideScrollBar" ref="scrollEl">
    <div class="airdrop-bg"></div>
    <!-- 导航 -->
    <NavBar
      :title="$t('airdrop.pageTitle')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      isFixed
    />
    <!-- 背景 -->
    <div class="content">
      <!-- 通知轮播 -->
      <Broadcast
        v-if="pageData.broadcasts.length > 1"
        class="notification"
        :list="pageData.broadcasts"
        :speed="66"
      >
        <template #cell="data">
          <AirdropCell
            v-for="(source, index) in data.list"
            :key="`${data.prefix}-${source.id || index}`"
            :item="source"
          ></AirdropCell>
        </template>
      </Broadcast>

      <!-- 用户信息 -->
      <div class="userinfo items-center">
        <Images
          class="userinfo-avatar"
          isHttp
          :placeholder="imgUrl.avatarDefault"
          :src="pageData.avatar || imgUrl.avatarDefault"
        />
        <div class="userinfo-right">
          <div class="userinfo-right-nick-bg items-center">
            <div class="userinfo-right-nick">
              {{
                pageData.nickname ? pageData.nickname.substring(0, 11) : "--"
              }}
              <span style="margin-left: -4px">{{
                pageData.nickname && pageData.nickname.length > 11 ? "..." : ""
              }}</span>
            </div>
            <img class="userinfo-right-level" :src="userLevelUrl" />
          </div>
          <div v-if="pageData.vipLevel == 0" class="userinfo-right-desc">
            {{ $t("airdrop.alert0") }}
          </div>
          <div v-else class="userinfo-right-desc">
            {{ $t("airdrop.alert") }}
          </div>
        </div>
      </div>
      <!-- 内容-容器 -->
      <!-- :class="{ 'content-box-noneheight': pageData.airdropStatus == 1 }" -->
      <div class="content-box items-center">
        <!-- 活动已结束 -->
        <div
          v-if="pageData.airdropStatus == 1"
          class="content-end items-center"
        >
          <img class="content-end-img" src="/image/airdrop/hdyjs-icon.svg" />
          <div class="content-end-text">{{ $t("airdrop.hdyjs") }}</div>
        </div>

        <!-- 倒计时 -->
        <div class="countdown items-center">
          <div
            v-if="pageData.airdropStatus != 1"
            class="countdown-bg items-center"
          >
            <span class="countdown-text">{{ $t("airdrop.djs_sy") }}</span>
            <div class="countdown-numview">
              <div class="countdown-numview-top"></div>
              <div class="countdown-numview-bottom"></div>
              <div class="countdown-numview-leftyuan"></div>
              <div class="countdown-numview-rightyuan"></div>
              <span>{{ countdown.days }}</span>
            </div>
            <span class="countdown-unit">{{ $t("airdrop.djs_t") }}</span>
            <div class="countdown-numview">
              <div class="countdown-numview-top"></div>
              <div class="countdown-numview-bottom"></div>
              <div class="countdown-numview-leftyuan"></div>
              <div class="countdown-numview-rightyuan"></div>
              <span>{{ countdown.hours }}</span>
            </div>
            <span class="countdown-unit">{{ $t("airdrop.djs_xs") }}</span>
          </div>
          <!-- <div v-else class="countdown-bg countdown-end">
            {{ $t("airdrop.hdyjs") }}
          </div> -->
        </div>
        <!-- 幸运值 -->
        <div
          class="box"
          :class="{
            'box-current': isLuckCurrent,
          }"
        >
          <!-- 四角-图片 -->
          <img
            v-if="isLuckCurrent"
            class="box-icon4 box-icon4-topleft"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="isLuckCurrent"
            class="box-icon4 box-icon4-topright"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="isLuckCurrent"
            class="box-icon4 box-icon4-bottomleft"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="isLuckCurrent"
            class="box-icon4 box-icon4-bottomright"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <!-- 标题 -->
          <div class="box-title items-center">
            <div
              class="box-title-num"
              :class="{
                'box-title-num-current': isLuckCurrent,
              }"
            >
              1
            </div>
            <div class="box-title-value">{{ $t("airdrop.xyz") }}</div>
          </div>
          <!-- 幸运值内容 -->
          <div class="box-luckview">
            <!-- 动画容器 -->
            <transition name="fade">
              <div v-if="isLuckCurrent" class="box-luckview-current">
                <!-- 光环 -->
                <img
                  v-if="isLuckCurrent"
                  class="box-luckview-gh box-luckview-center"
                  src="/image/airdrop/luck-gh.svg"
                />

                <!-- logo -->
                <img
                  v-if="isLuckCurrent"
                  class="box-luckview-logo box-luckview-center"
                  src="/image/airdrop/luckicon-icon.svg"
                />
                <!-- 四叶草 -->
                <img
                  class="box-luckview-syc box-luckview-center"
                  :class="{
                    'box-luckview-syc-start': pageData.isShowLuck == 2,
                  }"
                  src="/image/airdrop/luckicon-syc-icon.svg"
                />
                <!-- 幸运值 -->
                <div
                  v-if="
                    (pageData.isShowLuck < 3 || pageData.vipLevel == 0) &&
                    pageData.airdropStatus != 1
                  "
                  class="box-luckview-value box-luckview-center"
                  :class="{
                    'box-luckview-value-hidden': pageData.isShowLuck == 2,
                  }"
                  @animationend="pageData.isShowLuck = 3"
                >
                  ???
                </div>
                <div
                  v-if="
                    !pageData.luckPointDhEnd &&
                    ((pageData.isShowLuck == 3 && pageData.vipLevel != 0) ||
                      pageData.airdropStatus == 1)
                  "
                  class="box-luckview-value box-luckview-center"
                  :class="{
                    'box-luckview-value-show': pageData.isShowLuck == 3,
                  }"
                  @animationend="pageData.luckPointDhEnd = true"
                >
                  {{
                    pageData.airdropStatus != 1
                      ? decimalToLength(
                          Math.ceil(Number(pageData.luckPoint) * 100),
                          0
                        )
                      : "--"
                  }}%
                </div>
                <!-- 描述 -->
                <div class="box-luckview-text box-luckview-center">
                  {{ $t("airdrop.xyz") }}
                </div>
              </div>
              <!-- 正常状态 -->
              <div v-else class="box-luckview-normal items-center">
                <!-- 活动已结束 -->
                <!-- <div
                  v-if="pageData.airdropStatus == 1"
                  class="box-luckview-normal-text"
                >
                  {{ $t("airdrop.hdyjs") }}
                </div> -->
                <!-- v0 -->
                <div
                  v-if="pageData.vipLevel == 0"
                  class="box-luckview-normal-desc"
                  style="margin-bottom: 12px"
                >
                  {{ $t("airdrop.alert0") }}
                </div>
                <!-- 正常 -->
                <template v-else>
                  <div class="box-luckview-normal-text">
                    {{ $t("airdrop.xyz") }}
                  </div>
                  <div class="box-luckview-normal-num items-center">
                    <img
                      class="box-luckview-normal-num-img"
                      src="/image/airdrop/bfb-bg-icon.svg"
                    />
                    <img
                      class="box-luckview-normal-num-img-left"
                      src="/image/airdrop/bfb-bgxx-icon.svg"
                    />
                    <div class="box-luckview-normal-num-value">
                      {{
                        decimalToLength(
                          Math.ceil(Number(pageData.luckPoint || 0) * 100),
                          0
                        )
                      }}%
                    </div>

                    <img
                      class="box-luckview-normal-num-img-right"
                      src="/image/airdrop/bfb-bgxx-icon.svg"
                    />
                  </div>
                </template>
              </div>
            </transition>
          </div>
          <!-- 去交易按钮 -->
          <div
            v-if="pageData.vipLevel == 0 && pageData.airdropStatus != 1"
            class="box-footer openbtn"
            @click.stop="jumpPageFn(1)"
          >
            {{ $t("airdrop.qjy") }}
          </div>
          <!-- 幸运按钮 -->
          <div
            v-else-if="!pageData.luckPointDhEnd && pageData.airdropStatus != 1"
            class="box-footer openbtn"
            @click.stop="acquireLuckPointRequest"
          >
            {{ $t("airdrop.ks") }}
          </div>
        </div>
        <!-- 乘数 -->
        <div
          class="box"
          :class="{
            'box-current': isBonusCurrent,
          }"
        >
          <!-- 四角-图片 -->
          <img
            v-if="isBonusCurrent"
            class="box-icon4 box-icon4-topleft"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="isBonusCurrent"
            class="box-icon4 box-icon4-topright"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="isBonusCurrent"
            class="box-icon4 box-icon4-bottomleft"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="isBonusCurrent"
            class="box-icon4 box-icon4-bottomright"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <!-- 标题 -->
          <div class="box-title items-center">
            <div
              class="box-title-num"
              :class="{
                'box-title-num-current': isBonusCurrent,
              }"
            >
              2
            </div>
            <div class="box-title-value">{{ $t("airdrop.jrxycs") }}</div>
          </div>
          <!-- 乘数内容 -->
          <div class="box-bonusRate">
            <!-- 动画容器 -->
            <transition name="fade">
              <div v-if="isBonusCurrent" class="box-bonusRate-current">
                <!-- 光环 -->
                <img
                  v-if="isBonusCurrent"
                  class="box-bonusRate-gh box-bonusRate-center"
                  src="/image/airdrop/luck-gh.svg"
                />

                <!-- 卡片动画组 -->
                <div class="box-bonusRate-group box-bonusRate-center">
                  <!-- 左动画 -->
                  <img
                    class="box-bonusRate-group-left"
                    :class="{
                      'box-bonusRate-group-left-start':
                        pageData.isflipCard && pageData.cardGropuEnd == 1,
                    }"
                    src="/image/airdrop/card-dh-icon.svg"
                  />
                  <!-- 右边动画 -->
                  <img
                    class="box-bonusRate-group-right"
                    :class="{
                      'box-bonusRate-group-right-start':
                        pageData.isflipCard && pageData.cardGropuEnd == 1,
                    }"
                    src="/image/airdrop/card-dh-icon.svg"
                    @animationend="pageData.cardGropuEnd = 2"
                  />

                  <div
                    class="box-bonusRate-logo"
                    :class="{
                      'box-bonusRate-logo-start': pageData.cardGropuEnd == 2,
                    }"
                    @animationend="pageData.cardGropuEnd = 3"
                  >
                    <!-- 正面 -->
                    <div class="box-bonusRate-logo-bg">
                      <img
                        class="box-bonusRate-logo-bg-img"
                        src="/image/airdrop/card-icon.svg"
                      />
                      <div class="box-bonusRate-logo-bg-xxx">???</div>
                    </div>
                    <!-- 背面 -->
                    <div
                      class="box-bonusRate-logo-bg"
                      style="
                        backface-visibility: hidden;
                        transform: rotateY(180deg);
                      "
                    >
                      <img
                        v-if="!boxALlOpen || pageData.airdropStatus == 1"
                        src="/image/airdrop/card-icon.svg"
                      />
                      <img v-else src="/image/airdrop/card-end-icon.svg" />

                      <!-- pageData.airdropStatus == 1 活动结束 -->
                      <div
                        v-if="!boxALlOpen || pageData.airdropStatus == 1"
                        class="box-bonusRate-logo-bg-rate"
                      >
                        {{
                          pageData.airdropStatus == 1
                            ? "--X"
                            : `${pageData.currentBonusRate}X`
                        }}
                      </div>

                      <!-- 宝箱全部开完 -->
                      <div
                        v-if="boxALlOpen && pageData.airdropStatus != 1"
                        class="box-bonusRate-logo-bg-boxALlOpen items-center"
                      >
                        <div class="box-bonusRate-logo-bg-textend">
                          {{ $t("airdrop.bxyqbdk") }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 正常状态 -->
              <div v-else class="box-bonusRate-normal items-center">
                <!-- 活动结束,或者正常状态 -->
                <!-- <div
                  v-if="pageData.airdropStatus == 1"
                  class="box-bonusRate-normal-text"
                >
                  {{ $t("airdrop.hdyjs") }}
                </div> -->
                <!-- V0 用户 -->
                <div
                  v-if="pageData.vipLevel == 0 && pageData.airdropStatus != 1"
                  class="box-bonusRate-normal-desc"
                >
                  {{ $t("airdrop.alert0") }}
                </div>
                <!-- 宝箱全部开完 -->
                <div
                  v-else-if="boxALlOpen && pageData.airdropStatus != 1"
                  class="box-bonusRate-normal-text"
                >
                  {{ $t("airdrop.bxyqbdk") }}
                </div>
                <!-- 没有乘数 -->
                <div
                  v-else-if="
                    !pageData.currentBonusRate && pageData.airdropStatus != 1
                  "
                >
                  <img
                    class="box-bonusRate-normal-num"
                    src="/image/airdrop/bfb-bg-icon2.svg"
                  />
                </div>
                <!-- 正常状态 -->
                <div v-else class="box-bonusRate-normal-num items-center">
                  <img
                    class="box-bonusRate-normal-num-img"
                    src="/image/airdrop/bfb-bg-icon1.svg"
                  />
                  <img
                    class="box-bonusRate-normal-num-img-left"
                    src="/image/airdrop/bfb-bgxx-icon.svg"
                  />
                  <div class="box-bonusRate-normal-num-value">
                    {{ pageData.currentBonusRate || 0 }}X
                  </div>
                  <img
                    class="box-bonusRate-normal-num-img-right"
                    src="/image/airdrop/bfb-bgxx-icon.svg"
                  />
                </div>
              </div>
            </transition>
            <!-- 按钮 -->
            <div
              v-if="isBonusCurrent"
              class="box-footer openbtn"
              @click="flipCard"
            >
              {{ $t("airdrop.xz") }}
            </div>
          </div>
        </div>
        <!-- 宝箱轮播 -->
        <div
          class="box third"
          :class="{
            'box-current': pageData.cardGropuEnd == 3 && !boxALlOpen,
            'third-v0': pageData.vipLevel == 0,
          }"
          style="margin-bottom: 0"
        >
          <!-- 四角-图片 -->
          <img
            v-if="pageData.cardGropuEnd == 3 && !boxALlOpen"
            class="box-icon4 box-icon4-topleft"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="pageData.cardGropuEnd == 3 && !boxALlOpen"
            class="box-icon4 box-icon4-topright"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="pageData.cardGropuEnd == 3 && !boxALlOpen"
            class="box-icon4 box-icon4-bottomleft"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <img
            v-if="pageData.cardGropuEnd == 3 && !boxALlOpen"
            class="box-icon4 box-icon4-bottomright"
            src="/image/airdrop/airdrop-box1-icon.svg"
          />
          <!-- 标题 -->
          <div class="box-title third-title items-center">
            <div
              class="box-title-num"
              :class="{
                'box-title-num-current':
                  pageData.cardGropuEnd == 3 && !boxALlOpen,
              }"
            >
              3
            </div>
            <div class="box-title-value">{{ $t("airdrop.kqktbx") }}</div>
          </div>
          <!-- 宝箱轮播组件 -->
          <div
            v-if="
              pageData.cardGropuEnd == 3 ||
              pageData.vipLevel == 0 ||
              pageData.airdropStatus == 1
            "
            class="third-box"
          >
            <div class="third-box-swipe">
              <BoxSwipe
                :list="pageData.boxList"
                :activityEnd="pageData.airdropStatus == 1 || boxALlOpen"
                @change="swipeEnd"
                @init-done="(val) => boxSwipeDone(val)"
                @clickItem="showPopup"
                @clickLock="clickLock"
              ></BoxSwipe>
              <!-- 左边剪头 -->
              <img
                class="third-box-leftjt"
                src="/image/airdrop/jt-left2-icon.svg"
                @click.stop="clickSwipe(1)"
              />
              <!-- 右边剪头 -->
              <img
                class="third-box-rightjt"
                :class="{
                  'third-box-rightjt-end': pageData.airdropStatus == 1,
                }"
                src="/image/airdrop/jt-left2-icon.svg"
                @click.stop="clickSwipe(2)"
              />
            </div>
            <!-- 描述 -->
            <div
              v-if="pageData.vipLevel != 0 || pageData.airdropStatus == 1"
              class="third-box-desc items-center"
            >
              <img
                class="third-box-desc-icon"
                src="/image/pledge/title-icon.svg"
              />
              {{ $t("airdrop.alert03") }}
            </div>
          </div>
          <!-- 幸运值和乘数都没有,不展示宝箱 -->
          <div v-else class="box-bonusRate-normal items-center">
            <div class="third-box-desc">
              <img
                class="third-box-desc-icon"
                src="/image/pledge/title-icon.svg"
              />
              {{ $t("airdrop.alert03") }}
            </div>
          </div>
        </div>
      </div>
      <!-- 联系客服 -->
      <div class="customerservice">
        <div
          class="customerservice-btnbg items-center"
          @click.stop="jumpPageFn(2)"
        >
          <!-- isPtBox || boxALlOpen || pageData.airdropStatus == 1 -->
          <div
            class="customerservice-btn"
            :class="{
              'customerservice-btn-disabled': pageData.vipLevel == 0,
            }"
          >
            {{ $t("airdrop.hqjhm") }}
          </div>
        </div>
        <div
          v-if="pageData.vipLevel != 0"
          class="customerservice-desc items-center"
        >
          <div class="customerservice-desc-line"></div>
          <div class="customerservice-desc-text">
            {{ $t("airdrop.kfdesc") }}
          </div>
          <div class="customerservice-desc-line"></div>
        </div>
        <!-- 跳转按钮 -->
        <div class="customerservice-group">
          <!-- <div class="customerservice-group-btn">联系客服</div> -->
          <div class="customerservice-group-btns items-center">
            <div
              class="customerservice-group-btn"
              @click.stop="jumpPage('airdrop-desc')"
            >
              {{ $t("airdrop.descTitle") }}
            </div>
            <div class="customerservice-group-line"></div>
            <div
              class="customerservice-group-btn"
              @click.stop="jumpPage('airdrop-record')"
            >
              {{ $t("airdrop.recordTitle") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <InfoPopup
      v-model:show="pageData.isShow"
      :detail="detailPopup"
      @refresh="queryAirdropInfoRequest"
    ></InfoPopup>
    <!-- 加锁弹窗 -->
    <LockPopup v-model:show="isShowLock" @jump="jumpPageFn(3)" />
  </div>
</template>
<script setup name="airdrop">
import { JUMPAPPS } from "~/config";
import {
  queryAirdropActivityList,
  queryAirdropInfo,
  acquireLuckPoint,
  acquireBonusRate,
} from "@/api/airdrop";
import Broadcast from "../../components/info-scroll/index.vue";
import AirdropCell from "../../components/info-scroll/airdrop.vue";

import {
  getOssFileUrl,
  debounce,
  decimalToLength,
  navigateI18nTo,
} from "@/utils";
import { BASE_URL_PREFIX } from "~~/config";
import InfoPopup from "~~/components/airdrop/popupInfo.vue";
import * as MITO from "@zhj1214/qdjk-web";
import { useGlobalStore } from "~~/store/global";
import { showToast } from "vant";
import LockPopup from "@/components/airdrop/lock-popup.vue";

const BoxSwipe = defineAsyncComponent(() =>
  import("~/components/airdrop/swipe.vue")
);

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

const { t } = useI18n();

const imgUrl = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const scrollEl = ref();

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  isShowLuck: -1, // 1: ??? 2: 开始动画 3:展示具体值以及动画
  luckPointDhEnd: false, // 动画是否结束
  isflipCard: false, // 开始动画
  cardGropuEnd: 1, // 1 初始状态  2.乘数,左右两边动画结束,且幸运值和乘数都有值的情况 3 正面卡片翻转完成.所有动画结束
  nickname: "",
  vipLevel: -1,
  avatar: "",
  isJumpOpenChat: false, // 是否绑定了客服或者销售?
  airdropStatus: 0, // 1:已结束 其他:未开始/进行中
  boxList: [], // 宝箱数据
  luckPoint: 0, // 幸运值
  currentBonusRate: 0, // 乘数
  endTime: 0, // 结束时间
  broadcasts: [],
  isShow: false, // 是否展示弹窗
});

// 宝箱轮播组件
const boxSwipeRef = ref();

// 宝箱是否已经开完
const boxALlOpen = computed(() => {
  // return true;
  if (pageData.boxList.length > 0) {
    let isALL = true;
    pageData.boxList.forEach((e) => {
      if (e.boxStatus != 1) {
        isALL = false;
      }
    });
    if (isALL) pageData.cardGropuEnd = 3;
    return isALL;
  } else {
    return false;
  }
});

// 当前是不是幸运值
const isLuckCurrent = computed(() => {
  return (
    pageData.isShowLuck > 0 &&
    !pageData.luckPointDhEnd &&
    pageData.airdropStatus != 1 &&
    pageData.vipLevel != 0
  );
});

// 当前是不是 乘数
const isBonusCurrent = computed(() => {
  return (
    pageData.luckPoint &&
    pageData.luckPointDhEnd &&
    ((!pageData.currentBonusRate && !boxALlOpen.value) ||
      pageData.cardGropuEnd != 3)
  );
});

// 当前是否有要开启的宝箱
// const isCutBoxNeedOpen = computed(() => {
//   if (pageData.boxList.length > 0) {
//     let isNdeed = false;
//     pageData.boxList.forEach((e) => {
//       if (e.boxStatus == 2 && e.boxId) {
//         isNdeed = true;
//       }
//     });
//     return isNdeed;
//   } else {
//     return false;
//   }
// });

// 当前宝箱是不是普通宝箱
const isPtBox = computed(() => {
  if (pageData.boxList.length > 0) {
    let idx = pageData.boxList.findIndex((e) => !e.boxId);
    if (idx > 0) {
      const boxType =
        pageData.boxList[pageData.currentBonusRate > 0 ? idx - 1 : idx].boxType;
      // boxType === 1 就是普通宝箱
      return boxType == 1;
    } else {
      return true; // 禁止他去找客服
    }
  } else {
    return true; // 禁止他去找客服
  }
});

/**
 * @description: 获取轮播信息
 */
const queryAirdropActivityListRequest = () => {
  queryAirdropActivityList().then((res) => {
    if (res) {
      // 赋值,并消除头像加载失败问题
      pageData.broadcasts = res.map((e, index) => {
        if (!e.avatar || e.avatar == "https://asset.onetrader.online/") {
          e.avatar = imgUrl.avatarDefault;
        } else {
          e.avatar = e.avatar;
        }
        e.id = index;
        return e;
      });
    }
  });
};

/**
 * @description: 获取活动空投信息
 */
const queryAirdropInfoRequest = async () => {
  return queryAirdropInfo().then((res) => {
    /****** zhjdebugger *******/
    // res.luckPoint = null;
    // res.currentBonusRate = null;
    // res.vipLevel = 0;
    // res.airdropActivityExpireStatus = 1;
    /****** zhjdebugger *******/
    if (res) {
      pageData.airdropStatus = res.airdropActivityExpireStatus; // 1:已结束 其他:未开始/进行中
      pageData.boxList = res.boxList;
      // .map(e=> {
      //   if(e.boxType == 2)
      //   e.boxStatus = 2
      //   return e
      // } ); // 宝箱数据
      pageData.nickname = res.nickname;
      pageData.vipLevel = res.vipLevel;
      pageData.avatar = res.avatar;
      pageData.endTime = res.endTime;

      if (res.currentBonusRate) {
        pageData.currentBonusRate = res.currentBonusRate; // 乘数
        pageData.cardGropuEnd = 3;
      }

      if (!res.luckPoint) {
        pageData.isShowLuck = 1;
      } else {
        pageData.isShowLuck = 3;
        pageData.luckPoint = res.luckPoint; // 幸运值
        pageData.luckPointDhEnd = true;
      }
      pageData.isJumpOpenChat = res.assignSales == 0 && res.assignCustomer == 0;
    }
  });
};

// 用户等级
let userLevelUrl = computed(() => {
  return `${
    (location && location.origin) || ""
  }${BASE_URL_PREFIX}/image/airdrop/v${
    (pageData.vipLevel < 0 ? 0 : pageData.vipLevel) || "0"
  }-icon.png`;
});

/**
 * @description: 倒计时
 * @return {*} 定时器对象
 */
const countdown = reactive({
  days: 0,
  hours: 0,
});

const initCountdown = () => {
  if (!pageData.endTime) return;
  const date1 = new Date(); // 当前时间
  const date2 = new Date(Number(pageData.endTime));
  // 计算两个日期的时间戳差值（毫秒）
  let diff = date2 - date1;
  if (diff < 0) return false;
  let time = setInterval(() => {
    diff = date2 - new Date();
    // 将时间戳差值转换为天数
    countdown.days = Math.floor(diff / (1000 * 60 * 60 * 24));
    if (countdown.days < 0) countdown.days = 0;
    // 小时
    countdown.hours = Math.floor(
      (diff - countdown.days * 24 * 60 * 60 * 1000) / (1000 * 60 * 60)
    );

    if (countdown.hours < 0) countdown.hours = 0;
    // 结束
    if (countdown.days == 0 && countdown.hours == 0) {
      clearTimeout(time);
      time = null;
      if (pageData.airdropStatus != 1) {
        queryAirdropInfoRequest();
      }
    }
  }, 1000);
  return time;
};

/**
 * @description: 首次获取空投活动的幸运值
 */
const acquireLuckPointRequest = debounce(
  () => {
    if (pageData.vipLevel == 0) return;
    acquireLuckPoint().then((res) => {
      if (res) {
        pageData.isShowLuck = 2;
        pageData.luckPoint = res.luckPoint;
      }
    });
  },
  2000,
  false
);

/**
 * @description: 获取空投活动的今日幸运乘数
 */
const acquireBonusRateRequest = debounce(
  () => {
    acquireBonusRate().then((res) => {
      if (res) {
        pageData.currentBonusRate = res.currentBonusRate;
        setTimeout(() => {
          if (res.boxList) pageData.boxList = res.boxList; // 更新宝箱数据
        }, 1500);
        pageData.isflipCard = true;
      }
    });
  },
  3000,
  false
);

// 宝箱滚动到指定位置
const boxSlideTo = () => {
  if (pageData.boxList.length > 0 && boxSwipeRef.value) {
    let idx = pageData.boxList.findIndex((e) => !e.boxId);
    if (idx == -1) {
      idx = 5;
    } else if (idx > 0) {
      idx = idx - 1;
    }
    boxSwipeRef.value.slideTo(idx);
  }
  //  测试开箱
  // pageData.boxList[0].boxType = 2
  // showPopup(pageData.boxList[0])
};

// BoxSwipe 初始化完成
const boxSwipeDone = (val) => {
  if (val) {
    boxSwipeRef.value = val;
    boxSlideTo();
  }
};

let countdownTime = null;
onMounted(() => {
  // 1. 详情数据
  queryAirdropInfoRequest().then(() => {
    // 1.1 倒计时
    countdownTime = initCountdown();
    // 1.2 宝箱滚动到指定位置
    boxSlideTo();
  });
  // 2. 轮播数据
  queryAirdropActivityListRequest();
  // 3. 埋点
  firebase?.logEvent("BDC_H5_Airdrop_PUV");
});
onBeforeUnmount(() => {
  if (countdownTime) {
    clearTimeout(countdownTime);
    countdownTime = null;
  }
});

// 翻转卡片获取幸运乘数
const flipCard = () => {
  if (!pageData.luckPoint || pageData.currentBonusRate) return;
  acquireBonusRateRequest();
};

// 奖品滑动结束
const swipeEnd = (val) => {
  // console.log("--奖品--索引:", val);
};

// 手动点击 swipe 的向左向右切换 1 左 2 右
const clickSwipe = (type) => {
  if (!boxSwipeRef.value) {
    MITO.log({
      message: "pages/airdrop/index 623 行,boxSwipeRef.value实例不存在",
      tag: "手动上报",
      level: "high",
      ex: "手动上报",
    });
    showToast(t("common.wlycqcxjr"));
    return;
  }
  if (type == 1) {
    boxSwipeRef.value.slidePrev();
    // prizeSwipeRef.value.slideTo(997);
  } else {
    boxSwipeRef.value.slideNext();
  }
};

// 点击-页面跳转
const jumpPage = async (val, isApp = false, params) => {
  // console.log("--val--", val);
  if (isApp) {
    bridge.jumpAppRoute(JUMPAPPS()[val]);
  } else if (val === "airdrop-record") {
    navigateI18nTo({
      path: "/airdrop/record",
    });
  } else if (val === "airdrop-desc") {
    navigateI18nTo({
      path: "/airdrop/desc",
    });
  }
};

// 点击了获取激活码
const jumpPageFn = debounce(
  (type) => {
    if (pageData.airdropStatus == 1) {
      return showToast({
        message: t("airdrop.hdyjs"),
        "z-index": 9999999,
      });
    }
    if (type == 2 && pageData.vipLevel == 0) return;
    // v0 去交易
    if (pageData.vipLevel == 0) {
      jumpPage("market", true);
    }
    // 联系客服
    else if (pageData.isJumpOpenChat) {
      jumpPage("openChat", true);
    } else {
      jumpPage("ChatroomList", true);
    }
  },
  1000,
  false
);

// 展示弹窗
const detailPopup = ref();
const showPopup = (val) => {
  if (pageData.vipLevel == 0) return;
  detailPopup.value = val;
  pageData.isShow = true;
};
const isShowLock = ref(false);
// 点击了加锁的宝箱
const clickLock = () => {
  if (Number(pageData.vipLevel) > 0) isShowLock.value = true;
};
</script>
<style lang="scss" scoped>
.airdrop {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #f0f3fa 19.22%);
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;
  &-bg {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100vw;
    height: 344 * 2px;

    background: linear-gradient(
      182deg,
      #007bff 0%,
      rgba(255, 236, 249, 0) 100%
    );
    background-size: 100vw 250 * 2px;
    background-repeat: no-repeat;
  }
}

.notification {
  margin: 10 * 2px 0 15 * 2px 0;
  overflow: hidden;
}

.userinfo {
  position: relative;
  overflow: hidden;
  z-index: 9;
  margin: 0 15 * 2px 0 * 2px 15 * 2px;
  padding: 10 * 2px 20 * 2px;

  border-top-left-radius: 12 * 2px;
  border-top-right-radius: 12 * 2px;
  background: linear-gradient(
    180deg,
    rgba(148, 198, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(50px);
  border: 2px solid rgba(255, 255, 255, 0.4);

  &-avatar {
    width: 42 * 2px;
    height: 42 * 2px;
    border-radius: 100 * 2px;
    overflow: hidden;
    border: 3px solid #fff;
  }
  &-right {
    flex: 1;
    margin-left: 8 * 2px;
    &-level {
      width: 28 * 2px;
      height: 28 * 2px;
    }
    &-desc {
      color: #999da7;
      font-size: 12 * 2px;
      word-break: break-word;
    }
    &-nick {
      margin-right: 10 * 2px;

      color: #002853;
      font-size: 15 * 2px;
      font-weight: 590;
      white-space: nowrap;

      &-bg {
        margin-bottom: 6 * 2px;
      }
    }
  }
}

.content {
  position: relative;
  width: 100vw;
  &-box {
    position: relative;
    flex-direction: column;
    padding: 0 15 * 2px 15 * 2px 15 * 2px;
    background-color: #f3f6ff;
    border-radius: 12 * 2px 12 * 2px 0 0;
    overflow: hidden;
    &-noneheight {
      min-height: initial;
    }
  }
  &-end {
    position: absolute;
    z-index: 19;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
      180deg,
      rgba(0, 123, 255, 0.24) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(26px);
    justify-content: center;
    flex-direction: column;

    &-img {
      width: 70 * 2px;
      height: 70 * 2px;
      margin-bottom: 10 * 2px;
    }
    &-text {
      color: #002853;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
}

.countdown {
  position: relative;
  z-index: 9;
  padding: 0px 80 * 2px;
  margin-bottom: 15 * 2px;

  &-bg {
    padding: 4 * 2px 22 * 2px;
    border-radius: 0px 0px 36 * 2px 36 * 2px;

    background: linear-gradient(180deg, #fff 0%, #c2deff 100%);
    // background: linear-gradient(180deg, #f5f7fd 0%, #d1e7ff 100%);
  }
  &-unit {
    color: #999da7;
    font-size: 12 * 2px;
  }
  &-text {
    color: #002853;
    font-size: 12 * 2px;
    font-weight: 590;
    white-space: nowrap;
  }
  &-num {
    margin: 0 6 * 2px;
    text-align: center;
    width: 23 * 2px;
    height: 22 * 2px;
    line-height: 22 * 2px;
    color: #fff;
    font-size: 13 * 2px;
    font-weight: 590;
    background-image: url("/image/arousalUser/countdown-unit-icon.svg");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  &-numview {
    position: relative;
    margin: 0 6 * 2px;
    text-align: center;
    min-width: 23 * 2px;
    height: 22 * 2px;

    overflow: hidden;
    span {
      position: relative;
      padding: 0 3.5 * 2px;
      z-index: 9;
      text-align: center;
      min-width: 23 * 2px;
      height: 22 * 2px;
      line-height: 22 * 2px;
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
    }
    &-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      border-top-left-radius: 2 * 2px;
      border-top-right-radius: 2 * 2px;
      background-color: #007bff;
    }
    &-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      border-bottom-left-radius: 2 * 2px;
      border-bottom-right-radius: 2 * 2px;
      background-color: #4da3ff;
    }
    &-leftyuan {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 0;
      width: 4 * 2px;
      height: 4 * 2px;
      border-radius: 100px;
      background-color: #e4efff;
    }
    &-rightyuan {
      position: absolute;
      top: 50%;
      transform: translate(50%, -50%);
      right: 0;
      width: 4 * 2px;
      height: 4 * 2px;
      border-radius: 100px;
      background-color: #e4efff;
    }
  }
  &-end {
    padding: 4 * 2px 18 * 2px;
    color: #002853;
    text-align: center;
    font-size: 14 * 2px;
    font-weight: 590;
  }
}

.box {
  position: relative;
  z-index: 9;
  width: 100%;
  transform: translate3d(0, 0, 0); // 启用硬件加速
  min-height: 86 * 2px;
  border-radius: 8 * 2px;
  background: #fff;
  padding: 12 * 2px 20 * 2px;
  margin-bottom: 10 * 2px;

  &-current {
    min-height: 209 * 2px;
    border: 2px solid #007bff;
    background: linear-gradient(111deg, #cce5ff 0%, #cbf5ff 100%);
  }

  &-icon4 {
    position: absolute;
    width: 26 * 2px;
    height: 26 * 2px;
    &-topleft {
      top: -1px;
      left: -1px;
      transform: rotateY(180deg);
    }
    &-topright {
      top: -1px;
      right: -1px;
    }
    &-bottomleft {
      bottom: -1px;
      left: -1px;

      transform: rotateY(180deg) rotateX(180deg);
    }
    &-bottomright {
      bottom: -1px;
      right: -1px;

      transform: rotateX(180deg);
    }
  }

  &-title {
    position: relative;
    z-index: 9;
    &-num {
      height: 19 * 2px;
      line-height: 18 * 2px;
      width: 19 * 2px;
      color: #007bff;
      font-size: 13 * 2px;
      font-weight: 590;
      border: 1px solid #007bff;
      border-radius: 100px;
      margin-right: 8 * 2px;
      text-align: center;

      &-current {
        color: #fff;
        border: none;
        background-color: #007bff;
      }
    }

    &-value {
      color: #002853;
      font-size: 14 * 2px;
      font-weight: 590;
    }
  }

  &-footer {
    position: relative;
    z-index: 9;
    width: 100%;
    height: 38 * 2px;
    line-height: 38 * 2px;
    background-image: url("/image/airdrop/airdrop-box-btn-icon.svg") !important;
  }

  &-luckview {
    &-normal {
      margin-top: 14 * 2px;
      width: 100%;
      justify-content: center;

      &-text {
        position: relative;
        z-index: 9;
        padding: 2 * 2px 6 * 2px;
        border-radius: 4 * 2px 0px 0px 4 * 2px;
        background: #cce5ff;
        color: #007bff;
        font-size: 11 * 2px;
        font-weight: 590;
      }

      &-desc {
        position: relative;
        z-index: 9;

        color: #999da7;
        font-size: 12 * 2px;
        font-weight: 400;
      }

      &-num {
        justify-content: center;
        position: relative;
        width: 74 * 2px;
        height: 28 * 2px;

        &-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          &-left {
            position: relative;
            z-index: 9;
            width: 4 * 2px;
            height: 4 * 2px;
          }

          &-right {
            position: relative;
            z-index: 9;
            width: 4 * 2px;
            height: 4 * 2px;
          }
        }

        &-value {
          position: relative;
          z-index: 9;
          color: #fff1a9;
          font-size: 17 * 2px;
          font-weight: 700;
          margin: 0 7 * 2px;
        }
      }
    }

    &-current {
      position: relative;
      width: 100%;
      height: 125 * 2px;
    }

    &-center {
      position: absolute;

      left: 50%;
      transform: translateX(-50%);
    }

    &-gh {
      top: 0px;
      width: 140 * 2px;
      height: 140 * 2px;

      @keyframes rotateluck {
        0% {
          transform: translateX(-50%) rotateZ(0);
        }

        100% {
          transform: translateX(-50%) rotateZ(720deg);
        }
      }
      animation: rotateluck 5s infinite linear;
    }

    &-logo {
      top: 25 * 2px;
      z-index: 9;
      height: 92 * 2px;
    }

    &-syc {
      z-index: 19;
      top: 25 * 2px;
      height: 30 * 2px;

      &-start {
        @keyframes rotatehd {
          0% {
            transform: translateX(-50%) rotateZ(0);
          }
          100% {
            transform: translateX(-50%) rotateZ(360deg);
          }
        }
        animation: rotatehd 0.8s infinite linear;
      }
    }

    &-value {
      z-index: 99;
      top: 62 * 2px;
      color: #007bff;
      text-align: center;
      font-size: 22 * 2px;
      font-weight: 700;
      &-hidden {
        @keyframes valuehidden {
          0% {
            transform: translateX(-50%) scale(1);
            opacity: 1;
          }
          100% {
            transform: translateX(-50%) scale(0.1);
            opacity: 0;
          }
        }
        animation: valuehidden 0.8s 1 linear;
        animation-fill-mode: forwards;
      }
      &-show {
        @keyframes valueShow {
          0% {
            transform: translateX(-50%) scale(0.1);
            opacity: 0.1;
          }
          60% {
            transform: translateX(-50%) scale(1.2);
            opacity: 1;
          }
          100% {
            transform: translateX(-50%) scale(1);
            opacity: 1;
          }
        }
        animation: valueShow 0.5s 1 linear;
      }
    }
    &-text {
      z-index: 19;
      top: 95 * 2px;
      min-width: 105 * 2px;
      padding: 4 * 2px 15 * 2px;
      border-radius: 100px;
      border: 3px solid #fff1a9;
      background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
      white-space: nowrap;
      color: #fff3aa;
      text-align: center;
      font-size: 12 * 2px;
      font-weight: 700;
    }
  }

  &-bonusRate {
    &-normal {
      margin-top: 14 * 2px;
      width: 100%;
      justify-content: center;

      &-text {
        position: relative;
        z-index: 9;
        padding: 2 * 2px 6 * 2px;
        border-radius: 4 * 2px 0px 0px 4 * 2px;
        background: #cce5ff;
        color: #007bff;
        font-size: 11 * 2px;
        font-weight: 590;
      }

      &-num {
        justify-content: center;
        position: relative;
        width: 97 * 2px;
        height: 28 * 2px;

        &-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          &-left {
            position: relative;
            z-index: 9;
            width: 4 * 2px;
            height: 4 * 2px;
          }

          &-right {
            position: relative;
            z-index: 9;
            width: 4 * 2px;
            height: 4 * 2px;
          }
        }

        &-value {
          position: relative;
          z-index: 9;
          color: #fff1a9;
          font-size: 17 * 2px;
          font-weight: 700;
          margin: 0 20 * 2px;
        }
      }

      &-desc {
        position: relative;
        z-index: 9;

        color: #999da7;
        font-size: 12 * 2px;
        font-weight: 400;
      }
    }

    &-current {
      position: relative;
      width: 100%;
      height: 125 * 2px;
    }

    &-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    &-gh {
      top: 0px;
      width: 140 * 2px;
      height: 140 * 2px;

      @keyframes rotateluck {
        0% {
          transform: translateX(-50%) rotateZ(0);
        }

        100% {
          transform: translateX(-50%) rotateZ(720deg);
        }
      }
      animation: rotateluck 5s infinite linear;
    }

    &-title {
      border-radius: 0px 0px 8 * 2px 8 * 2px;
      color: #002853;
      &-jh {
        color: #fff !important;
        background: #007bff !important;
      }
    }

    &-group {
      z-index: 9;
      margin-top: 15 * 2px;
      height: 100 * 2px;
      width: 80 * 2px;

      &-left {
        position: absolute;
        bottom: 25px;
        left: -45px;
        transform: rotateZ(-15deg);
        width: 58 * 2px;
        height: 71 * 2px;
        &-start {
          @keyframes leftCard {
            0% {
              transform: rotateZ(-15deg);
            }

            50% {
              transform: rotateZ(0);
              opacity: 1;
            }

            100% {
              transform: rotateZ(0) translateX(45px);
              opacity: 0;
            }
          }
          animation: leftCard 0.9s ease-in-out 1;
          animation-fill-mode: forwards;
        }
      }
      &-right {
        position: absolute;
        bottom: 25px;
        right: -41px;
        transform: rotateZ(15deg);
        width: 58 * 2px;
        height: 71 * 2px;
        &-start {
          @keyframes rightCard {
            0% {
              transform: rotateZ(15deg);
            }

            50% {
              transform: rotateZ(0);
              opacity: 1;
            }

            100% {
              transform: rotateZ(0) translateX(-45px);
              opacity: 0;
            }
          }
          animation: rightCard 0.9s ease-in-out 1;
          animation-fill-mode: forwards;
        }
      }
    }

    &-logo {
      position: relative;
      z-index: 19;
      min-height: 100 * 2px;
      margin-bottom: 15 * 2px;
      transition: all 1s;
      transform-style: preserve-3d;
      perspective: 1000px;
      &-bg {
        position: absolute;
        top: 0;
        height: 100 * 2px;
        &-img {
          width: 80 * 2px;
          height: 100 * 2px;
        }
        &-xxx {
          position: absolute;
          top: 70px;
          left: 50%;
          transform: translateX(-50%);
          color: #007bff;
          text-align: center;
          font-size: 24 * 2px;
          font-weight: 700;
          transform: translateX(-50%);
        }

        &-textend {
          color: #fff1a9;
          text-align: center;
          font-size: 11 * 2px;
          word-break: break-word;
        }

        &-boxALlOpen {
          position: absolute;
          top: 0px;
          left: 0;
          width: 80 * 2px;
          height: 100 * 2px;
          padding: 2 * 2px 4 * 2px 0 * 2px 4 * 2px;
          justify-content: center;
          flex-direction: column;
        }

        &-rate {
          position: absolute;
          top: 74px;
          left: 50%;
          color: #007bff;
          text-align: center;
          font-size: 22 * 2px;
          font-weight: 700;
          transform: translateX(-50%);
        }
      }
      &-start {
        @keyframes scaleAndFlip {
          from {
            transform: rotateY(0) translateY(0);
          }

          to {
            transform: rotateY(180deg) translateY(0px);
          }
        }
        z-index: 99999;
        animation: scaleAndFlip 1s ease-in-out 1;
        animation-fill-mode: forwards;
      }
    }

    &-flipbtn {
      position: relative;
      z-index: 9;
      margin-top: 10 * 2px;
      text-align: center;
      font-size: 13 * 2px;
      font-weight: 600;
      &-disabled {
        border: none !important;
        box-shadow: none !important;
        background: #b0d1f4 !important;
        color: #fff !important;
      }
    }
  }
}

.third {
  padding-left: 0;
  padding-right: 0;
  // margin-bottom: 20 * 2px;

  &-v0 {
    padding-bottom: 0;
  }
  &-title {
    padding: 0 20 * 2px;
  }

  &-box {
    position: relative;
    width: 100%;
    margin-top: 14 * 2px;
    padding: 0 18 * 2px;

    &-swipe {
      margin-bottom: 14 * 2px;
      width: 100%;
    }

    &-leftjt {
      position: absolute;
      z-index: 888;
      width: 18 * 2px;
      height: 18 * 2px;
      top: 46 * 2px;
      transform: rotateY(180deg) translateY(-26%);
      left: 0;
    }
    &-rightjt {
      position: absolute;
      z-index: 888;
      width: 18 * 2px;
      height: 18 * 2px;
      top: 46 * 2px;
      transform: translateY(-26%);
      right: 0px;
    }

    &-desc {
      margin-bottom: 5 * 2px;
      text-align: left;
      word-break: keep-all;
      color: #999da7;
      font-size: 12 * 2px;
      word-break: break-word;
      &-icon {
        height: 18px;
        margin-top: -10 * 2px;
        margin-left: 10 * 2px;
        margin-right: 8px;
      }
    }
  }
}
.customerservice {
  position: relative;
  width: 100vw;

  &-btnbg {
    justify-content: center;
  }

  &-btn {
    text-align: center;
    width: 363 * 2px;
    height: 44 * 2px;
    line-height: 44 * 2px;
    border-radius: 6 * 2px;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 17 * 2px;
    font-weight: 590;

    &-disabled {
      background: #b0d1f4 !important;
      color: #fff;
    }
  }

  &-desc {
    margin-top: 10 * 2px;
    align-items: flex-start !important;
    &-line {
      margin-top: 30px;
      height: 1px;
      width: 80 * 2px;
      background-color: #ced1d9;
    }
    &-text {
      color: #ced1d9;
      text-align: center;
      font-size: 13 * 2px;
      word-break: break-word;
    }
  }
  &-group {
    margin-top: 19 * 2px;
    &-btns {
      justify-content: center;
    }
    &-btn {
      min-width: 160 * 2px;
      text-align: center;
      height: 32 * 2px;
      line-height: 32 * 2px;
      border-radius: 4 * 2px;
      background: #dfefff;
      color: #007bff;
      text-align: center;
      font-size: 13 * 2px;
      font-weight: 590;
    }
    &-line {
      width: 1px;
      height: 35.5 * 2px;
      margin: 0 20 * 2px;
      background: rgba(115, 119, 128, 0.15);
    }
  }
}

.openbtn {
  background-image: url("/image/airdrop/button-bg.svg");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100px;

  color: #fff;
  text-align: center;
  font-size: 15 * 2px;
  font-weight: 600;
}

// 动画元素,进入时间 0.5s
.fade-enter-active {
  transition: opacity 0.5s;
}

// 动画元素,离开时间 0.5s
.fade-leave-active {
  transition: opacity 0.5s;
}

// 动画元素 从0 ~ 1 的进入
.fade-enter-from {
  opacity: 0;
}
// 动画元素 从1 ~ 0.5 的消失
.fade-leave-to {
  opacity: 0.5;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
</style>
